<template>
    <div>
        <a-modal
         v-model:visible="visibleShow"
         :title="'在线学习'"
         @cancel="visibleShow = false"
         width="100%"
         :footer="null"
         :dialogStyle="{top:'0px'}"
         wrapClassName="learningTasks-full-modal"
         >
            <div style="display: flex;justify-content: flex-end;margin-bottom: 5px;" >
                
                <a-button style="margin-right: 10px;" :loading="confirmLoading" class="blue-btn" @click="shandleSubmit" icon="check-circle">提交并关闭</a-button>
                <a-button @click="visibleShow = false" icon="close-circle">取消</a-button>
            </div>
            <div class="process-handling-card on-siteInspection-top-tabs">
                <a-tabs type="card" v-model:activeKey="currentSteps" @change="stepsChange">
                    <a-tab-pane v-for="(item,index) in fileList" :key="index" :tab="item.fwjmc"></a-tab-pane>
                </a-tabs>
            </div>
            <div style="border: 1px solid #38f;border-top: none;" >
                <div class="quality-system-content" v-if="visibleShow">
                    <div style="display: flex;">
                        <div :style="{width: '30%'}">
                            <a-form :form="form" layout="inline" class="quality-system-form">
                                <a-form-item label="文件名称" class="flex-1-input-box">
                                    <a-input
                                    v-if="!currentData.disabled"
                                    v-model:value="selectFileItem.fwjmc"
                                    placeholder="请输入文件名称"
                                    v-decorator="[
                                        'fwjmc', { initialValue:selectFileItem.fwjmc, rules: rules.fwjmc}
                                    ]"/>
                                    <span v-else>{{ selectFileItem.fwjmc }}</span>
                                </a-form-item>
                                <a-form-item label="分类" class="flex-1-input-box">
                                    <a-tree-select
                                        v-if="!currentData.disabled"
                                        v-model:value="selectFileItem.ftype"
                                        :expandedKeys="expandedKeys"
                                        :tree-data="treeTypeList"
                                        :replaceFields='replaceFields'
                                        style="width:200px"
                                        placeholder="请选择分类"
                                        tree-default-expand-all
                                    />
                                    <span v-else>{{ selectFileItem.ftype }}</span>
                                </a-form-item>
                                <!-- <a-form-item label="文件编号" class="flex-1-input-box">
                                    <a-input
                                    v-if="!currentData.disabled"
                                    placeholder="请输入文件编号"
                                    v-model:value="currentData.fwjbh"/>
                                    <span v-else>{{ currentData.fwjbh }}</span>
                                </a-form-item>
                                <a-form-item label="受控版本" class="flex-1-input-box">
                                    <a-input
                                    v-if="!currentData.disabled"
                                    placeholder="请输入受控版本"
                                    v-model:value="currentData.fskbb"/>
                                    <span v-else>{{ currentData.fskbb }}</span>
                                </a-form-item>
                                <a-form-item label="修改次数" class="flex-1-input-box">
                                    <a-input
                                    v-if="!currentData.disabled"
                                    style="width:200px"
                                    placeholder="请输入修改次数"
                                    v-model:value="currentData.fxgcs"/>
                                    <span v-else>{{ currentData.fxgcs }}</span>
                                </a-form-item>
                                <a-form-item label="实施日期" class="flex-1-input-box">
                                    <a-date-picker
                                    v-if="!currentData.disabled"
                                    style="width:200px"
                                    placeholder="请输入实施日期"
                                    v-model:value="currentData.fssrq"
                                    />
                                    <span v-else>{{ currentData.fssrq }}</span>
                                </a-form-item> -->
                                <a-form-item label="上传日期" class="flex-1-input-box">
                                    <a-date-picker
                                    v-if="!currentData.disabled"
                                    style="width:200px"
                                    placeholder="请输入上传日期"
                                    v-model:value="selectFileItem.fscrq"
                                    />
                                    <span v-else>{{ selectFileItem.fscrq }}</span>
                                </a-form-item>
                                <a-form-item label="状态" class="flex-1-input-box">
                                    <a-radio-group v-model="selectFileItem.fzt" v-if="!currentData.disabled">
                                        <a-radio value="现行有效">
                                            现行有效
                                        </a-radio>
                                        <a-radio value="无效">
                                            无效
                                        </a-radio>
                                    </a-radio-group>
                                    <span v-else>{{ selectFileItem.fzt }}</span>
                                </a-form-item>
                                <a-form-item label="学习意见" class="flex-1-input-box">
                                    <a-textarea
                                        v-model="selectFileItem.fxxyj"
                                        placeholder="请输入学习意见"
                                        :autosize="{ minRows: 2, maxRows: 10000 }"
                                        @blur="fxxyjBlur(selectFileItem)"
                                        />
                                </a-form-item>
                                <!--<a-form-item style="float: right;">
                                    <a-button style="margin-right: 10px;">取消</a-button>
                                    <a-button :loading="confirmLoading" class="blue-btn" @click="shandleSubmit">提交并关闭</a-button>
                                </a-form-item> -->
                                <a-form-item >
                                    <a-button style="margin-left: 85px;" :loading="downloadFileLoading" class="blue-btn" type="primary" @click="downloadClick(selectFileItem)" icon="download">下载文件</a-button>
                                </a-form-item>
                            </a-form>
                        </div>
                        <div style="flex: 1;margin-left: 5px;">
                            <!-- <a-button :loading="downloadFileLoading" class="blue-btn" type="primary" @click="downloadClick">下载</a-button> -->
                            <iframe
                                v-if="iframeSrc"
                                :key="iframeKey"
                                :src="iframeSrc"
                                ref="iframeServerEditingRef"
                                scrolling="auto"
                                width="100%"
                                :height="(windowInnerHeight -150 )+'px'"
                                style="border: 0;"
                            ></iframe>
                        <span v-else>当前文件发生错误，请刷新！</span>
                        </div>
                    </div>
                    <div v-if="!currentData.disabled" style="
                        display: flex; justify-content: flex-end;
                        margin-top: 20px; width: 100%;
                        background-color: #fff;">
                        <a-button @click="visibleShow = false">取消</a-button>
                        <a-button style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)" icon="save">保存</a-button>
                        <a-button class="blue-btn" type="primary" @click="handleOk(false)" icon="check-circle">保存并关闭</a-button>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import moment from 'moment'
import {   queryById, downloadFile, spcyZltxwjHistoryGetZltxwjFile,submitZltxwjFlow, flowzltxwjqueryXgpxFjList, flowZltxwjupdateXgwjXxyjById,zltxwjClientOfficeApiviewXgpxwj, } from './service/index'
import blobType from '@/common/blobType'
import YchConstant from '@/api/YchConstant'
export default {
    components:{
    },
    props:{

    },
    data(){
        return{
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            treeTypeList:[],
            visibleShow:false,
            replaceFields: {
                children: 'children', //后端数组层级的名字
                key: 'key', //一般是id
                title: 'value',
                value: 'value' //onSelect(selectedKeys)的selectedKeys的参数值，便于获取然后返回给后端
            },
            expandedKeys:'',
            rules:{
                fwjmc: [{
                     required: true,
                     message: '请输入文件名称',
                     trigger: 'blur',
                 }],
                opinion: [{
                     required: true,
                     message: '请输入办理意见',
                     trigger: 'blur',
                }],
            },
            fwjmc:'',
            downloadFileLoading:false,
            downloadFun:[downloadFile,spcyZltxwjHistoryGetZltxwjFile,],
            iframeSrc:'',
            iframeKey:null,
            windowInnerHeight:window.innerHeight,
            confirmLoading: false,
            currentSteps:0,
            fileList:[],
            selectFileItem:{},
            currentData:{},
        }
    },
    watch:{

    },
    mounted(){

    },
    methods:{
        getData(val,treeData){//无id先保存再修改
            this.currentData = {}
            //console.log(val)
            this.treeTypeList = treeData
            this.fwjmc = val.fwjmc
            if(val.disabled){
                this.currentData = {
                    ...val,
                    fssrq:val.fssrq?moment(val.fssrq).format('YYYY-MM-DD'):'',
                    fscrq:val.fscrq?moment(val.fscrq).format('YYYY-MM-DD'):'',
                }
            }else{
                this.currentData = {
                    ...val,
                    fssrq:val.fssrq?moment(val.fssrq,'YYYY-MM-DD'):'',
                    fscrq:val.fscrq?moment(val.fscrq,'YYYY-MM-DD'):'',
                }
            }
            this.spinning = true
            flowzltxwjqueryXgpxFjList({jobid:val.jobid}).then(res=>{
                if(res.code == 200){
                    //console.log('获取详情',res.result.records)
                    this.fileList = res.result.records
                    this.currentSteps = 0
                    this.selectItemClick(this.fileList[0])
                }else{
                    this.fileList = []
                }
                this.spinning = false
            })
            // if(this.currentData.zltxwjid){
            //     //console.log('下载文件---')
            //     this.getIframe()
            // }
        },
        fxxyjBlur(val){
            flowZltxwjupdateXgwjXxyjById({id:val.id,fxxyj:val.fxxyj}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        stepsChange(val){
            this.selectItemClick(this.fileList[val])
        },
        selectItemClick(item){
            this.selectFileItem = item
            this.getIframe(item.id)
        },
        getIframe(val){
            //console.log('下载文件---进来了')
            // this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/flow-zltxwj/getFileCross?zltxwjid='+this.currentData.zltxwjid
            this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/zltxwjClientOfficeApi/viewXgpxwj?id=' + val +'&aa='+Date.now()
            //console.log('下载文件---iframeSrc',this.iframeSrc)
            this.iframeKey = Date.now()
        },
        getQueryById(id){
            queryById({id:id}).then(res=>{
                if(res.code == 200){
                    this.currentData = res.result
                    let val = res.result
                    this.currentData = {
                        ...this.currentData,
                        ...val,
                        fssrq:val.fssrq?moment(val.fssrq,'YYYY-MM-DD'):'',
                        fscrq:val.fscrq?moment(val.fscrq,'YYYY-MM-DD'):'',
                    }
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        downloadClick(item){
            var that = this
            var fileName = item.fwjmc + '.pdf'
            let param = {id: item.id}

            zltxwjClientOfficeApiviewXgpxwj(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data]), { type: blobType.type[blobType.suffix.indexOf('.pdf')] })
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
            })
            // var that = this
            // this.downloadFileLoading = true
            // var fileName = this.currentData.fwjmc+this.currentData.fwjlx
            // //console.log(fileName)
            // let param = {id: this.currentData.id}

            // this.downloadFun[this.currentData.funIndex](param).then((data) => {
            //     this.downloadFileLoading = false
            //     if (!data) {
            //         that.$message.warning('文件下载失败')
            //         return
            //     }
            //     let url = window.URL.createObjectURL(new Blob([data]), { type: blobType.type[blobType.suffix.indexOf(this.currentData.fwjlx)] })
            //     let link = document.createElement('a')
            //     link.style.display = 'none'
            //     link.href = url
            //     link.setAttribute('download', fileName)
            //     document.body.appendChild(link)
            //     link.click()
            //     document.body.removeChild(link) //下载完成移除元素
            //     window.URL.revokeObjectURL(url) //释放掉blob对象
            // })
        },
        // 提交
        shandleSubmit(){//提交
            this.form.validateFields((err, values) => {
                if (!err) {
                    var that = this
                    that.confirmLoading = true
                    that.$confirm({
                        title: '您确定要提交吗?',
                        onOk() {
                            let data = {
                                jobid: that.currentData.jobid,
                                ywid: that.currentData.zltxwjid,
                                // dbrid:values.dbrid.join(','),
                                opinion: that.currentData.fhjmc == '申请'?that.currentData.fxdly:that.currentData.opinion,
                                smgflag: that.currentData.smgflag?'是':'否',
                                map: {
                                    fssrq: that.currentData.fssrq ? moment(that.currentData.fssrq).format('YYYY-MM-DD') : '',
                                    fscrq: that.currentData.fscrq ? moment(that.currentData.fscrq).format('YYYY-MM-DD') : '',
                                    fwjmc: that.currentData.fwjmc,
                                    ftype: that.currentData.ftype,
                                    forder: that.currentData.forder,
                                    fskbb: that.currentData.fskbb,
                                    fwjbh: that.currentData.fwjbh,
                                    fsqr: that.currentData.fsqr,
                                    fsqks: that.currentData.fsqks,
                                    fxglx: that.currentData.fxglx,
                                    fxdly: that.currentData.fxdly,
                                    fqcsm: that.currentData.fqcsm,
                                    fxgcs: that.currentData.fxgcs,
                                    fxgxxryid: that.currentData.fxgxxryid,
                                }
                            }
                            submitZltxwjFlow(data).then(res=>{
                                if(res.code == 200){
                                    // that.$router.push('/assessCheck/qualityFlow/indexFlowExamine')
                                    that.$message.success(res.message)
                                    that.$emit('successReturn')
                                    that.visibleShow = false
                                }else{
                                    that.$message.warning(res.message)
                                }
                                that.confirmLoading = false
                            })
                        },
                        onCancel() {},
                    });
                }
            })
        },
    }
}
</script>
<style lang="less">
.learningTasks-full-modal {
    .ant-modal {
        padding-bottom: 0px !important
    }
    .ant-modal-body {
        height: calc(100vh - 50px) !important;
        padding: 8px;
    }
}
.quality-system-form{
    .ant-form-item-label{
        width: 80px;
        background-color: #e6f7ff;
        margin-top: 4px;
        height: 32px;
        font-weight: 600;
        line-height: 32px;
        margin-right: 5px;
    }
    .ant-form-item-control-wrapper{
        width: 200px;
    }
    .ant-upload-list{
        display: none !important;
    }
    .file-box-v{
        display: inline-block;
        // flex-direction: column;
        // align-items: center;
        // justify-content: center;
        border: 1px solid #d9d9d9;
        // width: 104px;
        // height: 104px;
        padding: 0 10px;
        overflow: hidden;
        border-radius: 2px;

    }
    .file-icon-v{
        font-size: 42px;
        color: rgb(24, 144, 255);
    }
    .flex-1-input-box{
            display: flex;
            width: 100%;
            .ant-form-item-control-wrapper{
            flex: 1;
        }
        .ant-form-item-control{
            width: 100%;
        }
            .ant-input{
                width: 100% !important;
            }
        }
}
</style>
